import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import HomeIcon from '@mui/icons-material/Home';
import AddIcon from '@mui/icons-material/Add';
import SearchIcon from '@mui/icons-material/Search';



export default function BottomNavBar() {
  const [value, setValue] = React.useState(0);
  const navigate = useNavigate();
  useEffect(() => {
    const { pathname } = useLocation;
    if (pathname === '/') {
      setValue(0);
    } else if (pathname === '/add') {
      setValue(1);
    } else if (pathname === '/search') {
      setValue(2);
    }
  }, [location.pathname]);

  return (
    <Box style={{ position: 'fixed', bottom: 0, width: '100%' }}>
      <BottomNavigation
        showLabels
        value={value}
        
      >
        <BottomNavigationAction label="Home" icon={<HomeIcon />} onClick={() => navigate('/') } />
        <BottomNavigationAction label="Add" icon={<AddIcon />} onClick={() => navigate('/add')} />
        <BottomNavigationAction label="Search" icon={<SearchIcon />} onClick={() => navigate('/search')} />
      </BottomNavigation>
    </Box>
  );
}
